<template>
	<div class="interest">
		<header class="pt30 pb15 container">
			<h1 class="fs20 black mb10">选择您感兴趣的分类</h1>
			<h1 class="fs20 black">贝小虎将为您甄选优质商品</h1>
		</header>
		<ul class="container">
			<li class="pb15 pt15" v-for='items in data'>
				<h3 class="c999 fs16 pb15 border-b">{{ items.category_name }}</h3>
				<ul class="row pb15">
					<li class="col s3 pl5 pr5 mt10" v-for="(item,index) in items.children" :key='index'><p class="border radius align-center pt10 pb10" :class="{ select : item.is_hover == 1 }" @click="select(item,index,items)">{{ item.category_name }}</p></li>
				</ul>
			</li>
		</ul>
		<button class="white bg-subject radius pt15 pb15 block w50" style="margin:20% auto;" @click="submit">保存</button>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	export default{
		data()
		{
			return{
				data 			: [],
				category_id 	: '',
				category_ids 	: ''
			}
		},
		created()
		{	
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/userinterest/list').then(res=> {
					this.data = res.data;
				})
			},
			select(item,index,items)
			{
				if(item.is_hover == 1)
				{
					item.is_hover = 0;
				}
				else
					item.is_hover = 1;

				this.$set(items.children, index, item);
			},
			submit()
			{
				for(var i in this.data)
				{
					for(var j in this.data[i].children)
					{
						if(this.data[i].children[j].is_hover == 1){
							this.category_ids += this.data[i].children[j].category_id +','
						}
					}
				}
				var exchange = this.category_ids;
            	var a = exchange.length;
        	    var b = exchange.substring(0,a - 1)
				this.$http.post('/userinterest/set',{ category_ids : b }).then(res=> {
					Toast('保存成功！');
					this.$router.push('/personal');
				})
			}
		}
	}
</script>

<style lang="less">
	.interest{
		.select{
			border:1px solid transparent;
			background-color: #ea2000;
			color:#fff;
		}
	}
</style>